<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
        function toUploadImage(){
            $("#imagefile").trigger("click");
        }
        /**
         * 通过 Ajax 上传图片
         */
        function uploadImage() {
            let formData = new FormData();
            formData.append("file", $("#imagefile")[0].files[0]);
            $.ajax({
                url: "/upload/headimage",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    console.log("ajax 上传图片返回的结果是：", res);
                    $("#headImage").attr("src", res.url);
                }
            });
        }
    </script>
    <script>
        /*刘思宇 光标触碰事件-文字变色*/
        function colorW(x)
        {
            x.style.color="#ffffff";
        }

        function colorY(x)
        {
            x.style.color="#ffb41d";
        }

    </script>
</head>
    <body>
    <!-----------------用户banner---------------->
    <div id="user_banner">
        <div class="pic">
            <input type="file" name="imagefile" id="imagefile" placeholder="请选择要上传的图片" onchange="uploadImage()" style="display: none"/>
            <a href="#" onclick="toUploadImage()">
                <img name="headImage" id="headImage" th:src="@{${session.user.headImages}}"/>
                <div>更换头像</div>
            </a>
        </div>
        <div class="con">
            <h2 th:text="${session.user.userName}">用户名</h2>
            <p>该用户太懒了，什么也没有留下~</p>
        </div>
    </div>
        <!-----------------快捷导航---------------->
        <div id="quick_nav">
            <a th:href="@{my_info}" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico1"><img src="images/nav_ico1.png"/></span >我的主页</a>
            <a th:href="@{write_note}" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico2"><img src="images/nav_ico2.png"/></span>上架商品</a>
            <a th:href="@{my_note}" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico7"><img src="images/nav_ico7.png"/></span>我的商品</a>
            <a href="#" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico3"><img src="images/nav_ico3.png"/></span>我的收藏</a>
            <a href="#" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico4"><img src="images/nav_ico4.png"/></span>商品订单</a>
            <a href="#" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico6"><img src="images/nav_ico6.png"/></span>我的评论</a>
        </div>
    </body>
</html>